<template>
    <div id='echarts'>
        <P></P>
        <div id="main"></div>
    </div>
</template>

<script>
    import {} from 'vuex'
    import P from '../../components/Home/P.vue'
    import * as echarts from 'echarts/core';
    import {
        TitleComponent,
        ToolboxComponent,
        TooltipComponent,
        GridComponent,
        LegendComponent,

    } from 'echarts/components';
    import {
        LineChart,
        BarChart
    } from 'echarts/charts';
    import {
        CanvasRenderer
    } from 'echarts/renderers';

    echarts.use(
        [
            TitleComponent,
            ToolboxComponent,
            TooltipComponent,
            GridComponent,
            LegendComponent,
            LineChart,
            CanvasRenderer,
            BarChart
        ]
    );



    export default {
        components: {
            P
        },
        data() {
            return {

            };
        },
        methods: {
            char() {
                var chartDom = document.getElementById('main');
                var myChart = echarts.init(chartDom);
                var option;
                const colors = ['red', 'yellow', 'green']
                option = {
                    color: colors,
                    title: {
                        text: '走势图',
                        subtext: '用户'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['新注册用户', '新增订单', '新增管理员']
                    },
                    grid: {
                        left: '5%',
                        right: '5%',
                        bottom: '9%',
                        top: '30%'
                    },
                    toolbox: {
                        feature: {
                            dataZoom: {
                                yAxisIndex: 'none'
                            },
                            dataView: {
                                readOnly: false
                            },
                            magicType: {
                                type: ['line', 'bar']
                            },
                            restore: {},
                            saveAsImage: {}
                        },
                    },
                    xAxis: [{
                        type: 'category',
                        data: ['2021-06-03', '2021-06-04', '2021-06-05', '2021-06-06', '2021-06-07',
                            '2021-06-08',
                            '2021-06-09'
                        ],
                    }],
                    yAxis: {
                        type: 'value',
                        min: 0,
                        max: 200,
                    },
                    series: [{
                            name: '新注册用户',
                            type: 'bar',
                            data: [24, 22, 15, 12, 28, 13, 5],
                            markPoint: {
                                data: [{
                                        type: 'max',
                                        name: '最大值'
                                    },
                                    {
                                        type: 'min',
                                        name: '最小值'
                                    }
                                ]
                            },
                        },
                        {
                            name: '新增订单',
                            type: 'bar',
                            data: [13, 43, 17, 0, 0, 3, 0],
                            markPoint: {
                                data: [{
                                        type: 'max',
                                        name: '最大值'
                                    },
                                    {
                                        type: 'min',
                                        name: '最小值'
                                    }
                                ]
                            },
                        },
                        {
                            name: '新增管理员',
                            type: 'bar',
                            data: [45, 38, 48, 20, 37, 32, 8],
                            markPoint: {
                                data: [{
                                        type: 'max',
                                        name: '最大值'
                                    },
                                    {
                                        type: 'min',
                                        name: '最小值'
                                    }
                                ]
                            },
                        }
                    ]
                };

                option && myChart.setOption(option);

            },
        },
        mounted() {
            this.char()
        },
        computed: {}
    }
</script>
<style lang='scss' scoped>
    #main {
        // background: gainsboro;
        width: 80%;
        height: 400px;
        margin: 0 auto;
        // padding: 30px;
    }
</style>